<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        function checkAll() {
            //让所有复选框都选中
            //document.getElementsByName();是根据指定的name属性查询返回多个标签对象的集合
            //这个集合的操作跟数组一样
            //集合中每个元素都是dom对象
            //这个集合中的元素顺序是他们在html页面中从上到下的顺序
            var hobbies=document.getElementsByName("hobby");
            //checked表示复选框的选中状态,如果选中时true,否则为false
            //checked这个属性可读,可写
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked=true;
            }
            // alert(hobbies[0].checked);
        }
        //全不选
        function checkno() {
            var hobbies=document.getElementsByName("hobby");
            //checked表示复选框的选中状态,如果选中时true,否则为false
            //checked这个属性可读,可写
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked=false;
            }
        }
        //反选
        function checkReverse() {
            var hobbies=document.getElementsByName("hobby");
            //checked表示复选框的选中状态,如果选中时true,否则为false
            //checked这个属性可读,可写
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked=!hobbies[i].checked;
            }
        }
    </script>
</head>
<body>
        兴趣爱好:
        <input type="checkbox" name="hobby" value="cpp" checked="checked">c++
        <input type="checkbox" name="hobby" value="java">java
        <input type="checkbox" name="hobby" value="js">javascript
        <br/>
        <button onclick="checkAll()">全选</button>
        <button onclick="checkno()">全不选</button>
        <button onclick="checkReverse()">反选</button>
</body>
</html>